<div style="padding: 5px;">
    <div>
        <div class="toolSet">
            <div class="toolSetLeft">
                <p>Period:<nz-range-picker nzSize="default" style="margin-left: 0.1rem"></nz-range-picker></p>
            </div>
            <div class="toolSetRight">
                <itmp-toolbar [toolbarList]="toolbarList"></itmp-toolbar>
            </div>
        </div>
    </div>
    <nz-table id="nzTable"
            #basicTable
            [nzShowPagination]="false"
            [nzData]="listOfData">
        <thead>
        <tr>
            <th *ngFor="let item of renderHeader;">
                <div>{{item.name}}</div>
                <div style="padding-top: 0.1rem"><input nz-input placeholder="" /></div>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of basicTable.data;let idx = index">
            <td>{{ idx + 1 }}</td>
            <td>{{ data.id }}</td>
            <td>{{ data.startTime }}</td>
            <td>{{ data.source }}</td>
            <td>{{ data.description }}</td>
            <td>{{ data.roadName }}</td>
            <td>{{ data.zone }}</td>
            <td>{{ data.status }}</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td [attr.colspan]="renderHeader.length+1" style="padding: 10px;">
                <itmp-pagination [totalEle]="pagination.totalEle"
                                 [pageSize]="pagination.pageSize"
                                 [pageNum]="pagination.currentPage"
                                 showCountInfo = true
                                 [count] = "pagination.currentSize"
                                 (pageNumChange)="onPageChange($event)"
                                 (pageSizeChange)="onSizeChange($event)"></itmp-pagination>
            </td>
        </tr>
        </tfoot>
    </nz-table>
</div>
